import React, { Component } from 'react'
import './index.css'
export default class Header extends Component {
    // 通过ref获取
    // titleRef = React.createRef()

    // 通过受控组件获取
    // state = {
    //     title: ''
    // }
    // changeHandler(e){
    //     this.setState({
    //         title:e.target.value
    //     })
    // }

    keyupHandler(e) {
        if (e.code === 'Enter') {
            // 通过ref获取：
            // console.log('ref: ', this.titleRef.current.value.trim())
            // 受控组件获取
            // console.log('state: ', this.state.title)


            // 1. 获取文本框输入的内容
            let title = e.target.value.trim()
            console.log(title)
            // 2. 调用父组件中的 addTodo方法，传递title
            this.props.addTodo(title)
            // 3. 清空文本框
            e.target.value = ''
        }
    }
    render() {
        return (
            <div className="todo-header">
                <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.keyupHandler.bind(this)} />
                {/* <input type="text" placeholder="请输入你的任务名称，按回车键确认" onKeyUp={this.keyupHandler.bind(this)} ref={this.titleRef} /> */}
                {/* <input type="text" placeholder="请输入你的任务名称，按回车键确认"
                    value={this.state.title}
                    onKeyUp={this.keyupHandler.bind(this)}
                    onChange={this.changeHandler.bind(this)}
                /> */}
            </div>
        )
    }
}
